<template>
  <div class="component-container">
    <div class="component-title-wrapper">
      <div class="component-title">
        <span class="title-breadcrumb">活跃数据</span>
      </div>
    </div>
    <div class="component-body">
      <div class="overview">
        <section>
          <div>今日活跃</div>
          <p v-loading="loadingStatisticsUntilNow">{{statisticsData.today}}</p>
          <div v-loading="loadingStatistics">昨日活跃：{{statisticsData.yesterday}}</div>
        </section>
        <section>
          <div>本周活跃</div>
          <p v-loading="loadingStatisticsUntilNow">{{statisticsData.sevenDay}}</p>
          <div v-loading="loadingStatisticsByWeek">上周活跃：{{statisticsData.lastSevenDay}}</div>
        </section>
        <section>
          <div>本月活跃</div>
          <p v-loading="loadingStatisticsUntilNow">{{statisticsData.thirtyDay}}</p>
          <div v-loading="loadingStatisticsBymonth">上月活跃：{{statisticsData.lastThirtyDay}}</div>
        </section>
      </div>
      <el-button-group style="margin-bottom: 20px;">
        <el-button plain :class="{'active-btn': curDay===index}" v-for="(days, index) in daysNumber" :key="index" @click="searchdata(days, index)">近{{days}}日</el-button>
      </el-button-group>
      <div class="data-panel">
        <div class="panel-header">活跃数据趋势</div>
        <div class="panel-body">
          <div ref="chart" style="height:400px;width:934px;margin:0 auto;" v-loading="loadingStatistics"></div>
        </div>
      </div>
      <div class="component-title">
        <span class="title-breadcrumb">30日活跃数据明细</span>
      </div>
      <div>
        <el-table :data="statisticsList" style="width: 100%;" border v-loading="loadingStatistics">
          <el-table-column label="日期" prop="day" min-width="160" align="center"></el-table-column>
          <el-table-column label="每日活跃量" prop="switchActive" min-width="160" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      statisticsList: [],
      statisticsData: {
        today: 0,
        sevenDay: 0,
        fourteenDay: 0,
        thirtyDay: 0,
        yesterday: 0,
        lastSevenDay: 0,
        lastFourteenDay: 0,
        lastThirtyDay: 0,
      },
      daysNumber: [7, 14, 30],
      curDay: 0,
      chart: null,
      loadingStatistics: true,
      loadingStatisticsByWeek: true,
      loadingStatisticsBymonth: true,
      loadingStatisticsUntilNow: true,
    };
  },
  components: {},
  mounted () {
    this.getStatistics()
    this.getStatisticsByWeek()
    this.getStatisticsBymonth()
    this.getStatisticsUntilNow()
  },
  methods: {
    //获取每日统计数据
    async getStatistics() {
      this.loadingStatistics = true;
      let { data: res } = await this.$http.post( "bms/statistics?limit=30" );
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      this.statisticsList = res.data;
      this.loadingStatistics = false;
      this.statisticsList.forEach( (item, index) => {
        if(index < 1) this.statisticsData.yesterday = item.switchActive;
      })
      this.chart = this.$refs.chart;
      this.drawChart(this.chart, this.statisticsList.map((item) => item.switchActive), this.daysNumber[this.curDay], JSON.stringify(this.statisticsList));
    },
    //获取每周统计数据
    async getStatisticsByWeek() {
      this.loadingStatisticsByWeek = true;
      let { data: res } = await this.$http.post( "bms/statistics/week?limit=1" );
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      res.data.forEach( (item, index) => {
        if(index < 1) this.statisticsData.lastSevenDay = item.switchActive;
      })
      this.loadingStatisticsByWeek = false;
    },
    //获取每月统计数据
    async getStatisticsBymonth() {
      this.loadingStatisticsBymonth = true;
      let { data: res } = await this.$http.post( "bms/statistics/month?limit=1" );
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      res.data.forEach( (item, index) => {
        if(index < 1) this.statisticsData.lastThirtyDay = item.switchActive;
      })
      this.loadingStatisticsBymonth = false;
    },
    async getStatisticsUntilNow() {
      this.loadingStatisticsUntilNow = true;
      let { data: res } = await this.$http.post("bms/switch/statistics/active");
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      this.statisticsData.today = res.data.day;
      this.statisticsData.sevenDay = res.data.week;
      this.statisticsData.thirtyDay = res.data.month;
      this.loadingStatisticsUntilNow = false;
    },
    drawChart(chart, data, dayNumber, statisticsList) {
      if (chart) {
        let newData = data.filter((item, index) => index < dayNumber).reverse()
        let xaxis = JSON.parse(statisticsList).map((item) =>
          item.day.substring(item.day.length - 5)
        ).filter((item, index) => index < dayNumber).reverse()
        const myChart = echarts.init(chart);
        const option = {
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xaxis,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: newData,
              type: "line",
              areaStyle: {
                color: "#B3E1FE",
              },
            },
          ],
          itemStyle: {
            color: "#067BEA", //改变折线点的颜色
            lineStyle: {
              color: "#067BEA", //改变折线颜色
            },
          },
          tooltip: {
            show: true
          },
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    searchdata(days, index) {
      this.curDay = index;
      this.drawChart(this.chart, this.statisticsList.map((item) => item.switchActive), this.daysNumber[this.curDay], JSON.stringify(this.statisticsList));
    }
  }
}
</script>

<style lang='scss' scoped>
.component-container {
  min-width: 1000px;
  height: calc(100vh - 50px);
  color: #333333;
  .component-title-wrapper {
    padding: 0 16px;
    .component-title {
      font-size: 12px;
      color: rgb(102, 102, 102);
      padding: 20px 0;
      border-bottom: 1px solid #ecedee;
      position: relative;
      .title-breadcrumb {
        font-weight: bolder;
        font-size: 16px;
        padding: 0 10px;
        font-weight: bolder;
        display: inline-block;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          width: 4px;
          height: 20px;
          margin-top: -10px;
          background: #0070cc;
        }
      }
      .condition-right {
        position: absolute;
        right: 0;
        top: 10px;
      }
    }
  }
  .component-body {
    padding: 16px 16px 48px;
    .component-title {
      font-size: 12px;
      color: rgb(102, 102, 102);
      padding: 20px 0;
      position: relative;
      .title-breadcrumb {
        font-weight: bolder;
        font-size: 16px;
        padding: 0 10px;
        font-weight: bolder;
        display: inline-block;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          width: 4px;
          height: 20px;
          margin-top: -10px;
          background: #bac8cf;
        }
      }
      .condition-right {
        position: absolute;
        right: 0;
        top: 10px;
      }
    }
    .overview {
      margin-bottom: 20px;
      display: flex;
      border: 1px solid #ecedee;
      section {
        flex: 1;
        border-right: 1px solid #ecedee;
        padding: 20px 28px;
        &:last-child {
          border: none;
        }
        p {
          font-weight: 400;
          font-size: 28px;
          line-height: 40px;
          color: #0070cc;
          padding: 0;
          margin: 0;
        }
      }
    }
    .active-btn {
      background: #fff;
      border-color: #409eff;
      color: #409eff;
    }
    .active-btn + .el-button {
      border-left-color: #409eff;
    }
    .data-panel {
      margin-bottom: 20px;
      border: 1px solid #ecedee;
      border-radius: 3px;
      .panel-header {
        font-size: 14px;
        padding: 10px 16px;
        color: #373d41;
        font-weight: 700;
        line-height: 1.5;
      }
      .panel-body {
        padding: 10px 16px;
      }
    }
  }
}
</style>